<script setup lang="ts">
import { Api } from '@/assets/apis';
import { ref, onMounted } from 'vue'
import type { MaleRank } from '@/typings'
import { useRouter } from 'vue-router';

const router = useRouter()
const maleRank = ref<MaleRank>({} as MaleRank)
const femaleRank = ref<MaleRank>({} as MaleRank)
const bookRank = ref<MaleRank>({} as MaleRank)
const showPage = ref(false)

onMounted(async () => {
    let { data } = await Api.getMaleRank()
    maleRank.value = data.data
    // console.log(maleRank.value);
})
onMounted(async () => {
    let { data } = await Api.getFemaleRank()
    femaleRank.value = data.data
    // console.log(femaleRank.value);
})
onMounted(async () => {
    let { data } = await Api.getBookRank()
    bookRank.value = data.data
    // console.log(bookRank.value);
    showPage.value = true
})
</script>

<template>
    <div v-if="showPage">
        <div class="list">
            <h3>
                <span>男生排行榜</span>
                <div class="more-btn">更多</div>
            </h3>
            <div class="first"
                @click="router.push(`/book/${maleRank.books[0].sourceUrl.slice(8)}?title=${maleRank.books[0]?.title}`)">
                <div class="poster">
                    <em>1</em>
                    <img :src="maleRank.books[0]?.iconUrl" alt="">
                </div>
                <div class="text">
                    <p class="title">{{ maleRank.books[0]?.title }}</p>
                    <p class="author">{{ maleRank.books[0]?.author }}/{{ maleRank.books[0]?.category }}</p>
                    <p class="desc">{{ maleRank.books[0]?.description }}</p>
                </div>
            </div>
            <div class="top top1"
                @click="router.push(`/book/${maleRank.books[1].sourceUrl.slice(8)}?title=${maleRank.books[1]?.title}`)">
                <em>2</em>
                {{ maleRank.books[1].title }}
            </div>
            <div class="top top2"
                @click="router.push(`/book/${maleRank.books[2].sourceUrl.slice(8)}?title=${maleRank.books[2]?.title}`)">
                <em>3</em>
                {{ maleRank.books[2].title }}
            </div>
            <div class="top top3"
                @click="router.push(`/book/${maleRank.books[3].sourceUrl.slice(8)}?title=${maleRank.books[3]?.title}`)">
                <em>4</em>
                {{ maleRank.books[3].title }}
            </div>
            <div class="top top4"
                @click="router.push(`/book/${maleRank.books[4].sourceUrl.slice(8)}?title=${maleRank.books[4]?.title}`)">
                <em>5</em>
                {{ maleRank.books[4].title }}
            </div>
        </div>
        <div class="list">
            <h3>
                <span>女生排行榜</span>
                <div class="more-btn">更多</div>
            </h3>
            <div class="first"
                @click="router.push(`/book/${femaleRank.books[0].sourceUrl.slice(8)}?title=${femaleRank.books[0]?.title}`)">
                <div class="poster">
                    <em>1</em>
                    <img :src="femaleRank.books[0]?.iconUrl" alt="">
                </div>
                <div class="text">
                    <p class="title">{{ femaleRank.books[0]?.title }}</p>
                    <p class="author">{{ femaleRank.books[0]?.author }}/{{ femaleRank.books[0]?.category }}</p>
                    <p class="desc">{{ femaleRank.books[0]?.description }}</p>
                </div>
            </div>
            <div class="top top1"
                @click="router.push(`/book/${femaleRank.books[1].sourceUrl.slice(8)}?title=${femaleRank.books[1]?.title}`)">
                <em>2</em>
                {{ femaleRank.books[1].title }}
            </div>
            <div class="top top2"
                @click="router.push(`/book/${femaleRank.books[2].sourceUrl.slice(8)}?title=${femaleRank.books[2]?.title}`)">
                <em>3</em>
                {{ femaleRank.books[2].title }}
            </div>
            <div class="top top3"
                @click="router.push(`/book/${femaleRank.books[3].sourceUrl.slice(8)}?title=${femaleRank.books[3]?.title}`)">
                <em>4</em>
                {{ femaleRank.books[3].title }}
            </div>
            <div class="top top4"
                @click="router.push(`/book/${femaleRank.books[4].sourceUrl.slice(8)}?title=${femaleRank.books[4]?.title}`)">
                <em>5</em>
                {{ femaleRank.books[4].title }}
            </div>
        </div>
        <div class="list">
            <h3>
                <span>图书排行榜</span>
                <div class="more-btn">更多</div>
            </h3>
            <div class="first"
                @click="router.push(`/book/${bookRank.books[0].sourceUrl.slice(8)}?title=${bookRank.books[0]?.title}`)">
                <div class="poster">
                    <em>1</em>
                    <img :src="bookRank.books[0]?.iconUrl" alt="">
                </div>
                <div class="text">
                    <p class="title">{{ bookRank.books[0]?.title }}</p>
                    <p class="author">{{ bookRank.books[0]?.author }}/{{ bookRank.books[0]?.category }}</p>
                    <p class="desc">{{ bookRank.books[0]?.description }}</p>
                </div>
            </div>
            <div class="top top1"
                @click="router.push(`/book/${bookRank.books[1].sourceUrl.slice(8)}?title=${bookRank.books[1]?.title}`)">
                <em>2</em>
                {{ bookRank.books[1].title }}
            </div>
            <div class="top top2"
                @click="router.push(`/book/${bookRank.books[2].sourceUrl.slice(8)}?title=${bookRank.books[2]?.title}`)">
                <em>3</em>
                {{ bookRank.books[2].title }}
            </div>
            <div class="top top3"
                @click="router.push(`/book/${bookRank.books[3].sourceUrl.slice(8)}?title=${bookRank.books[3]?.title}`)">
                <em>4</em>
                {{ bookRank.books[3].title }}
            </div>
            <div class="top top4"
                @click="router.push(`/book/${bookRank.books[4].sourceUrl.slice(8)}?title=${bookRank.books[4]?.title}`)">
                <em>5</em>
                {{ bookRank.books[4].title }}
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.list {
    width: 335rem;
    height: 341rem;
    padding: 15rem 0 30rem 0;
    margin: 0 20rem;
    border-bottom: 1rem solid #ededed;
    margin-bottom: 4rem;

    h3 {
        height: 28rem;
        margin-bottom: 16rem;
        line-height: 28rem;

        span {
            font-size: 20rem;
            color: #1a1a1a;
            font-weight: bold;
        }

        .more-btn {
            float: right;
            width: 26rem;
            height: 28rem;
            padding: 0 17rem;
            border: 1rem solid #f0f0f0;
            border-radius: 28rem;
            color: #999;
        }
    }

    .first {
        width: 335rem;
        height: 142rem;
        display: flex;
        margin-bottom: 15rem;

        .poster {
            width: 100rem;
            height: 142rem;
            margin-right: 10rem;
            position: relative;

            em {
                background: url(../assets/images/web_trunk_1476860251636_top1.png) 0 0 no-repeat;
                position: absolute;
                top: -2rem;
                display: block;
                width: 18rem;
                height: 17rem;
                background-size: contain;
                color: #f0f0f0;
                text-indent: 4rem;
                left: 8rem;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        .text {
            p {
                max-width: 225rem;
            }

            .title {
                height: 17rem;
                line-height: 17rem;
                font-size: 16rem;
                color: #3b352d;
                margin-bottom: 13rem;
            }

            .author {
                color: #aba59a;
                font-size: 12rem;
                margin-bottom: 16rem;
            }

            .desc {
                font-size: 14rem;
                color: #807a73;
                line-height: 20rem;
                overflow: hidden;
                -webkit-line-clamp: 4;
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }
        }
    }

    .top {
        width: 335rem;
        height: 18rem;
        padding-bottom: 17rem;
        font-size: 15rem;
        color: #6c6358;
        display: flex;
    }

    .top1 {
        em {
            background: url(../assets/images/web_trunk_1476862076943_top2.png) 0 0 no-repeat;
            background-size: contain;
            color: #fff;
            text-align: center;
            display: block;
            margin-right: 10rem;
            width: 16rem;
            height: 17rem;
            font-weight: bold;
        }
    }

    .top2 {
        em {
            background: url(../assets/images/web_trunk_1476862671892_top3.png) 0 0 no-repeat;
            background-size: contain;
            color: #fff;
            text-align: center;
            display: block;
            margin-right: 10rem;
            width: 16rem;
            height: 17rem;
            font-weight: bold;
        }
    }

    .top3 {
        em {
            color: #6c6358;
            width: 16rem;
            height: 17rem;
            margin-right: 10rem;
            text-align: center;
            font-weight: bold;
        }
    }

    .top4 {
        em {
            color: #6c6358;
            width: 16rem;
            height: 17rem;
            margin-right: 10rem;
            text-align: center;
            font-weight: bold;
        }
    }
}
</style>